<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 使用地点 -->
      <uni-card title="使用地点" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.shiYongDiDian"
            :localdata="shiYongDiDian"
          />
        </uni-forms-item>
        <!-- 其他区域 -->
        <uni-forms-item v-if="formData.shiYongDiDian === '其他区域'">
          其他区域名称：
          <uni-easyinput v-model="formData.qiTaQuYu" />
        </uni-forms-item>
      </uni-card>
      <!-- 开始时间 -->
      <uni-card title="开始时间" extra="必填*">
        <uni-forms-item>
          <view
            @click="kaiShiShiJianDatesPop = true"
            class="border-solid border-gray-300 flex items-center justify-between rounded h-10 border"
          >
            <text class="float-left ml-3">{{ formData.kaiShiShiJian }}</text>
            <uni-icons
              class="float-right font-bold"
              type="arrow-down"
              size="18"
            ></uni-icons>
          </view>
        </uni-forms-item>
      </uni-card>
      <!-- 结束时间 -->
      <uni-card title="结束时间" extra="必填*">
        <uni-forms-item>
          <view
            @click="jieShuShiJianDatesPop = true && !isEdit"
            class="border-solid border-gray-300 flex items-center justify-between rounded h-10 border"
          >
            <text class="float-left ml-3">{{ formData.jieShuShiJian }}</text>
            <uni-icons
              class="float-right font-bold"
              type="arrow-down"
              size="18"
            ></uni-icons>
          </view>
        </uni-forms-item>
      </uni-card>
      <!-- 使用时间（分钟） -->
      <uni-card title="使用时间（分钟）" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.shiYongShiJian" />
        </uni-forms-item>
      </uni-card>
      <!-- 操作人 -->
      <uni-card title="操作人" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.caoZuoRen" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="ziWaiDeng"
    />
  </scroll-view>
  <!-- 开始时间组件 -->
  <Dates
    v-model:selectedTime="formData.kaiShiShiJian"
    @timeSelected="handlekaiShiShiJian"
    @popType="kaiShiShiJianDatesPop = $event"
    v-if="kaiShiShiJianDatesPop"
  />
  <!-- 结束时间组件 -->
  <Dates
    v-model:selectedTime="formData.jieShuShiJian"
    @timeSelected="handlejieShuShiJian"
    @popType="jieShuShiJianDatesPop = $event"
    v-if="jieShuShiJianDatesPop"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import { subtractTime } from '@/utils/utils';
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';

// 表格提交信息
const formData = ref({
  shiYongDiDian: '', // 使用地点
  qiTaQuYu: '', // 其他区域
  kaiShiShiJian: '', // 开始时间
  jieShuShiJian: '', // 结束时间
  shiYongShiJian: '', // 使用时间
  caoZuoRen: '', // 操作人
});

// 使用地点数据
const shiYongDiDian = [
  { text: '冷菜间', value: '冷菜间' },
  { text: '刺身间', value: '刺身间' },
  { text: '裱花间', value: '裱花间' },
  { text: '巧克力间', value: '巧克力间' },
  { text: '出餐区', value: '出餐区' },
  { text: '其他区域', value: '其他区域' },
];
// 开始时间
const kaiShiShiJianDatesPop = ref(false);
const handlekaiShiShiJian = (time: string) => {
  kaiShiShiJianDatesPop.value = false;
  formData.value.kaiShiShiJian = time;
};
// 结束时间
const jieShuShiJianDatesPop = ref(false);
const handlejieShuShiJian = (time: string) => {
  jieShuShiJianDatesPop.value = false;
  formData.value.jieShuShiJian = time;
  // 计算使用时间
  formData.value.shiYongShiJian = subtractTime(
    formData.value.kaiShiShiJian,
    formData.value.jieShuShiJian,
  ).toString();
};

// 清空表单数据
const clearFormData = () => {
  formData.value = {
    shiYongDiDian: '', // 使用地点
    qiTaQuYu: '', // 其他区域
    kaiShiShiJian: '', // 开始时间
    jieShuShiJian: '', // 结束时间
    shiYongShiJian: '', // 使用时间
    caoZuoRen: '', // 操作人
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
